<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>iscs_FrontEnd:frontEndTool</title>
	<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css" />
	<!--<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />-->
	<link href="toc/css/metroStyle/metroStyle.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/css/themes/github-v2.min.css" media="all" rel="stylesheet" type="text/css" />
	<link type="text/css" rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="indexcss/docs.css">
	<style>
		table {
			border: 1px solid #ccc;
			border-left: 0;
			width: 100%;
			font-size: 14px;
		}
		
		tbody,
		thead,
		tr {
			width: 100%;
		}
		
		tr th {
			border: 1px solid #ccc;
			border-right: 0;
			background: #FF6537;
			color: #fff;
			height: 40px;
			padding: 5px 10px;
			font-size: 14px;
		}
		
		tr td {
			text-align: left;
			padding: 5px 10px;
			border: 1px solid #ccc;
			border-right: 0;
		}
		
		tr:nth-child(odd) {
			background: #f4f4f4;
		}
		
		table tr:hover td {
			background: #ccc;
		}
		
		.markdown-body h1 {
			font-size: 20px;
			color: #FF6537;
		}
		
		.markdown-body h2 {
			font-size: 18px;
		}
		
		.markdown-body h3 {
			font-size: 16px;
		}
		
		#header {
			width: 100%;
			height: 25px;
			background-color: #FF6537;
			position: fixed;
			top: 0;
		}
	</style>

</head>

<body>
	
	<div>
		<div style='width:25%;'>
			<ul id="tree" class="ztree" style='width:100%;'>

			</ul>
		</div>
		<div id='readme' style='width:70%;margin-left:20%;'>
			<article class='markdown-body'>
				<h1 id="-">大前端工具集</h1>
<blockquote>
<p><a href="https://github.com/nieweidong/fetool">https://github.com/nieweidong/fetool</a>
本篇文章记录了一枚程序猿的百宝箱。PS：每个分类的都按照推荐的先后排列。</p>
<p>主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 <strong>前端瑞士军刀</strong> 来总结这篇文章再合适不过鸟。</p>
</blockquote>
<h4 id="-">您可以通过以下方式联系到我：</h4>
<ul>
<li>微博 <a href="http://weibo.com/darrencode" title="Darren 聂微东">@聂微东</a></li>
<li>个人 Blog <a href="http://www.fefork.com/" title="一枚 Web 技术领域的手艺人">fefork.com</a></li>
<li>博客园 <a href="http://www.cnblogs.com/Darren_code/" title="关注前端技术">犀利的东哥</a></li>
<li>QQ 群 <strong>214199415</strong>，群名<strong>前端 Club</strong>。PS：入群务必请提供 <strong>有内容的 git 或 blog 地址</strong>，否则进不去哈:)</li>
</ul>
<hr>
<h2 id="-">目录</h2>
<ul>
<li><a href="#blogs">前端组织/前端博客</a></li>
<li><a href="#blog_build">博客搭建</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">浏览端 JS</a></li>
<li><a href="#project_build">Project Build</a></li>
<li><a href="#node_package">Node Package</a></li>
<li><a href="#node_project">Node Project</a></li>
<li><a href="#read">精选阅读</a><ul>
<li><a href="#fedev">前端技术</a></li>
<li><a href="#node_read">Node 学习资料</a></li>
<li><a href="#interview">前端面试</a></li>
<li><a href="#otherdev">其他技术</a></li>
</ul>
</li>
<li><a href="#tools">工具/软件</a><ul>
<li><a href="#web">Web</a></li>
<li><a href="#app">APP</a></li>
<li><a href="#mac">Mac</a></li>
<li><a href="#linux">Linux</a></li>
</ul>
</li>
<li><a href="#BrowserPlugins">Chrome Plugins</a></li>
<li><a href="#git">Git</a></li>
<li><a href="#backend">数据端</a></li>
<li><a href="#ux">设计/交互</a></li>
<li><a href="#handbook">速查手册</a></li>
<li><a href="#other">杂七杂八</a></li>
<li><a href="#cool">前端炫技-炫酷狂拽叼炸天的 Web</a></li>
<li><a href="#summary">小结</a></li>
<li><a href="#todo">TODO</a></li>
</ul>
<h2 id="-">正文</h2>
<h3 id="blogs">前端组织/前端博客</h3>

<blockquote>
<p>虽混过外企俩家，但劳资英文这项的技能点还是灰色的...so，俺关注的站点主要以中文为主</p>
</blockquote>
<ul>
<li><a href="https://github.com">GitHub</a> - 没 <code>Github</code> 都不好意思面基有木有！！！</li>
<li><a href="https://developer.mozilla.org/zh-CN/">MDN</a> - 无数的资源再等着你探索，追标准和新特性肯定得关注的网站</li>
<li><a href="https://www.awesomes.cn/">Awesomes.cn</a> - 国人维护的前端资源库，深度对接到 <code>Github</code>，分类和展现清晰，值得收藏</li>
<li><a href="https://uptodate.frontendrescue.org/zh/">如何跟上前端开发的最新前沿</a> - RT，不解释</li>
<li><a href="http://www.imooc.com/">慕课</a> - 大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝</li>
<li><a href="http://javascript.ruanyifeng.com/">阮一峰</a> - 关注多年，拜读其 <a href="http://es6.ruanyifeng.com/">ES6</a> 系列。虽网传靠写书进鸟阿里，但博客内容确实够丰富</li>
<li><a href="http://www.w3cplus.com/">W3Cplus</a> - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的，<code>Sass</code> 专家级</li>
<li><a href="http://taobaofed.org/">淘宝前端团队</a> - 内容涵盖 <code>Web</code> 和 <code>Node</code>，要深度游深度，要广度有广度</li>
<li><a href="http://www.75team.com/">奇舞团博客</a> - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了</li>
<li><a href="http://fex.baidu.com/">百度 FEX</a> - 代表作 <code>FIS</code>、<code>UEditor</code>、<code>WebUploader</code>、<code>KityMinder</code></li>
<li><a href="http://www.alloyteam.com/">腾讯全端 AlloyTeam</a> - 腾讯 Web 前端团队，博客真的有点丑...</li>
<li><a href="http://blog.fens.me/">粉丝日志 for 张丹</a> - 大爱作者写的 <code>Node</code> 系列</li>
<li><a href="http://www.zhangxinxu.com/wordpress/">张鑫旭</a> - 成名多年的、高产的前端大湿，<code>CSS</code>猛人</li>
</ul>
<h3 id="blog_build">博客搭建</h3>

<ul>
<li><a href="https://hexo.io/zh-cn/">Hexo</a> - 快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。<code>Github</code> 地址:<a href="https://github.com/hexojs/hexo">Hexo</a></li>
<li><a href="http://jekyll.bootcss.com/">Jekyll</a> - 将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。<code>Github</code> 地址：<a href="https://github.com/jekyll/jekyll">Jekyll</a></li>
<li><a href="https://pages.github.com/">GithubPages</a> - 免费的静态站点。配合着 <code>Hexo</code> 或 <code>Jekyll</code> 的模板，分分搭建出一套炫酷的个人博客</li>
<li><a href="https://www.tumblr.com/">Tumblr</a> - 轻博客的祖师爷，各种各样的主题感觉不错</li>
<li><a href="https://zh-cn.wordpress.com/">Wordpress</a> - 这玩意古老到都不想介绍</li>
</ul>
<blockquote>
<p>使用 <code>Hexo/Jekyll + GitPage</code>，前端搭建静态博客那是相当 easy。用 <code>Markdown</code> 写文章做记录，再 <code>push</code> 到 <code>Github</code> 上，分分钟高大上有木有</p>
</blockquote>
<p>再推荐三款视觉效果极佳的 <code>Hexo</code> 主题，且在 <code>Github</code> 上的 <code>star</code> 都很不错：</p>
<ul>
<li><a href="https://github.com/iissnan/hexo-theme-next">NexT</a></li>
<li><a href="https://github.com/litten/hexo-theme-yilia">Yilia</a></li>
<li><a href="https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak">Tranquilpeak</a></li>
</ul>
<p>不能偏心，所以也推荐三款 <code>Jekyll</code> 的好主题：</p>
<ul>
<li><a href="https://github.com/mmistakes/so-simple-theme">So Simple</a> 如果你看过俺的博客，对这个主题就肯定不会陌生啦</li>
<li><a href="https://github.com/mmistakes/hpstr-jekyll-theme">HPSTR</a> 当初 <a href="http://www.fefork.com/">fefork</a> 差点选这个主题:)</li>
<li><a href="https://github.com/daattali/beautiful-jekyll#readme">beautiful</a></li>
</ul>
<h3 id="html">HTML</h3>

<p>纯 <code>HTML</code> 相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客</p>
<ul>
<li><a href="https://github.com/joshbuchea/HEAD">HEAD</a> - 最全的 <code>&lt;head&gt;</code> 列表，真心佩服这种偏执的整理能力</li>
<li><a href="https://github.com/akveo/blur-admin">blur-admin</a> - 视觉冲击极强的管理后台，各种动画效果。PS：因为团队有<a href="https://github.com/ant-design/ant-design">ant-design</a>的使用经验，感觉使用起来不是很顺畅，这套后台又是基于<code>AngularJS</code>，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧...</li>
<li><a href="https://github.com/almasaeed2010/AdminLTE">AdminLTE</a> - 很小清新的后台模板，每次看<a href="https://almsaeedstudio.com/preview">preview</a> 页面都觉得很有视觉冲击</li>
<li><a href="https://github.com/puikinsh/gentelella">gentelella</a> - 刚用这个搭建了我司内部用的的数据平台，效果喜人。模板实现的功能比较全，比如登录、注册甚至各种 <code>widget</code>，所以最终交付的时候，自己几乎没写几行CSS。</li>
<li><a href="https://github.com/google/material-design-lite">material-design-lite</a> - <code>Star</code> 数超过2W的开源模板项目，包含了多套简洁的 <code>templates</code>，可以用于博客、后台或者企业首页。</li>
</ul>
<h3 id="css">CSS</h3>

<ul>
<li><a href="http://metroui.org.ua/">MetroUI</a> - 好看好用，重点是样式特别、个性</li>
<li><a href="https://connoratherton.com/loaders">LoadersCSS</a> - 用 CSS 技术实现 loading 动画； 补一句，想熟悉、理解 <code>keyframes、animation、transform、transition</code> 的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)</li>
<li><a href="https://github.com/weui/weui">WeUI</a> - 一套同微信原生视觉体验一致的基础样式库 为微信 Web 开发量身设计，令用户的使用感知更加统一</li>
<li><a href="https://github.com/postcss/postcss">PostCSS</a> - 最近才知道大名鼎鼎<a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>是其插件 推荐大漠的文章<a href="http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html">《PostCSS深入学习》</a>，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案</li>
<li><a href="https://github.com/una/CSSgram">CSSgram</a> - 图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 <a href="http://caniuse.com/#search=CSS%20Blend%20Modes">Can I Use</a></li>
<li><a href="https://github.com/chinchang/hint.css">HINT.css</a> - 一款非常小巧的提示框效果</li>
<li><a href="http://kazzkiq.github.io/balloon.css/">Balloon.css</a>| |同上，一款非常小巧的提示框效果</li>
<li><a href="http://ianlunn.github.io/Hover/">Hover.css</a> - 很多鼠标 Hover 态的效果，可以给产品学习一下:)</li>
<li><a href="http://css-cursor.techstream.org/">Cursor</a> - 记录各浏览器对Cursor的支持情况</li>
<li><a href="https://github.com/zmoazeni/csscss">csscss</a> - 用于检查 CSS 代码冗余</li>
<li><a href="http://purecss.io/">purecss</a> - 小巧的响应式 CSS 库，Yahoo!出品</li>
<li><a href="https://jonsuh.com/hamburgers/">hamburgers</a> - 简单的动画库，让 Click(or Tap) 变得美妙</li>
<li><a href="http://www.cssmatic.com">cssmatic</a> - 一个帮忙调试CSS效果的工具</li>
</ul>
<h3 id="javascript">浏览端 JS</h3>

<ul>
<li><a href="https://github.com/requirejs/requirejs">requirejs</a> - JS模块化是构建复杂项目的第一步 中文学习文档奉上：<a href="http://www.requirejs.cn/">RequireJS 中文网</a></li>
<li><a href="http://echarts.baidu.com/index.html">ECharts</a> - 好用，最关键的是支持的图表展示非常之多，强烈推荐</li>
<li><a href="http://www.swiper.com.cn">Swiper</a> - 强大的 Slider 库 其实这类效果库非常多，但文档能那么专业的就很少鸟</li>
<li><a href="https://babeljs.io/">babel</a> - <code>ES6</code> 用起来。这个插件可以让我们用新的 <strong>标准/提案</strong> 写 <code>JavaScript</code> 代码，然后再向下 <strong>转换编译</strong>，最终生成随处可用的 <code>JavaScript</code> 代码。中文文档奉上<a href="https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md">《babel-handbook》</a></li>
<li><a href="http://alvarotrigo.com/fullPage/">fullPage</a> - 非常好用的全屏滑动库，看 Demo 就明白</li>
<li><a href="http://photoswipe.com/">PhotoSwipe</a> - 偶常用的 js 库 官网上有这么一句很关键、重要&quot;no dependencies&quot;</li>
<li><a href="http://cn.vuejs.org">Vuejs</a> - 比较喜欢其作者... 所以劳资正在看源码学习学习</li>
<li><a href="http://lab.ejci.net/favico.js/">favico.js</a> - 动态改变浏览器标签栏中的网站图标，非常好玩</li>
<li><a href="http://ant.design">ant.design</a> - 蚂蚁金服搞的良心项目，文档美好的令人发指 样式优雅，强烈推荐内部系统尝试此库</li>
<li><a href="https://highlightjs.org/">highlightjs</a> - 代码高亮库，支持非常多的语言</li>
<li><a href="http://www.daterangepicker.com">daterangepicker</a> - 时间选择插件的不二选择，基于 <code>Bootstrap</code> 和 <a href="http://momentjs.com/">Moment.js</a></li>
<li><a href="https://github.com/ksky521/nodePPT">nodePPT</a> - 前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快</li>
<li><a href="https://github.com/RubaXa/Sortable">Sortable</a> - 拖拽神器，用了就知道</li>
<li><a href="https://github.com/CodeSeven/toastr">toastr</a> - 信息提示的库，推荐的原因是卖相好、功能强大  <a href="http://codeseven.github.io/toastr/demo.html">demo</a></li>
<li><a href="http://benpickles.github.io/peity/">peity.js</a> - jQuery的图表插件，特别cute，感觉萌萌哒 将HTML转换成一个小的<code>&lt;svg&gt;</code>饼图、圆环图、折线图等等</li>
<li><a href="https://github.com/Ranks/emojify.js">emojify.js</a> - 能够将<code>emoji</code>关键词转换为<code>emoji</code>图片的<code>JS</code>插件 可以快速的为你的网站提供<code>emoji</code>表情支持</li>
<li><a href="https://github.com/Nickersoft/push.js">Push.js</a> - 基于 <code>Notification API</code> 实现的桌面效果的提示栏。浏览器支持情况不错，如<a href="http://caniuse.com/#search=Notification">http://caniuse.com/#search=Notification</a></li>
<li><a href="http://www.hcharts.cn/">Highcharts</a>| |Highcharts 中文网，又是一个图表库 确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚</li>
<li><a href="https://github.com/rstacruz/nprogress/">NProgress</a> - 使页面加载时有更好的loading效果</li>
<li><a href="https://github.com/jaredreich/notie.js">Noticejs</a> - 一个简单的通知库，木有依赖</li>
<li><a href="https://github.com/peachananr/onepage-scroll">onepage-scroll</a> - 依赖 jQuery 的单页滚动库，和 <a href="http://alvarotrigo.com/fullPage/">fullPage</a> 类似</li>
<li><a href="http://videojs.com/">videojs</a> - 当下视频需求都用上<code>&lt;video&gt;</code>鸟 样式和交互统一的问题交给 videojs 搞定:)</li>
<li><a href="http://zenorocha.github.io/clipboard.js/">clipboard</a> - 仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持...</li>
<li><a href="https://github.com/impress/impress.js">impress.js</a> -  用来写 PPT 不错，偶也曾为其写过一篇<a href="http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html">impress.js 初体验</a></li>
<li><a href="http://fengyuanchen.github.io/cropper/">Cropper</a> - 国人开发的图片裁剪库</li>
</ul>
<blockquote>
<p><strong><em><code>Swiper/PhotoSwipe/fullPage</code> 有这仨库，微信里常见的 H5 页完全不是问题哒</em></strong></p>
</blockquote>
<h3 id="project_build">Project Build</h3>

<ul>
<li><a href="https://www.npmjs.com/package/pm2">pm2</a> - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 <a href="https://www.npmjs.com/package/forever">Forever</a> 的进阶库，想了解的可以看这篇文章<a href="http://se77en.cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/">《拥抱PM2》</a></li>
<li><a href="http://webpack.github.io/">Webpack</a> - 项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。</li>
<li><a href="https://github.com/gulpjs/gulp/">Gulp</a> - Gulp 是基于 Node 实现 Web 前端自动化开发的工具。 俺总结了篇<a href="http://www.fefork.com/gulp_1/">《gulp使用小结》</a>，推荐您阅读:)</li>
<li><a href="http://bower.io/">Bower</a> - 前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：<a href="http://blog.fens.me/nodejs-bower-intro/">《bower 解决 js 的依赖管理》</a></li>
<li><a href="http://gruntjs.com/">Grunt</a> - 和 Gulp 类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇<a href="http://www.benben.cc/blog/?p=407">《Gulp vs Grunt》</a> 英盲又想看文档，可以去<a href="http://www.gruntjs.net/">Grunt 中文网</a></li>
<li><a href="http://fex-team.github.io/fis3/">FIS</a> - 度厂出品的前端构建工具 文档清晰，功能强大，推荐了解和使用</li>
<li><a href="https://ci.gitlab.org/">Gitlab CI</a> - 一套基于<a href="https://about.gitlab.com/">Gitlab</a>的持续集成服务</li>
</ul>
<blockquote>
<p>Gulp + Webpack 的使用<strong>套路</strong>参考: <a href="https://github.com/demohi/learning-gulp">learning-gulp</a></p>
<p>Gulp 资料收集：<a href="https://github.com/Platform-CUF/use-gulp">use-gulp</a></p>
<p>推荐篇与 Webpack 相关的文章《<a href="http://boke.io/tan-tan-css-modules/">CSS Modules</a>》</p>
<p>Webpack 用起来吼吼：<a href="https://github.com/petehunt/webpack-howto">webpack-howto</a></p>
</blockquote>
<h3 id="node_package">Node Package</h3>

<blockquote>
<p>作为一名大前端甚至是多端，<code>Node</code> 绝逼是必备的一块</p>
<p>有关 <code>Node</code> 的学习资料，请访问</p>
</blockquote>
<h5 id="-">这里介绍些有特色且前端有必要知道的包</h5>
<ul>
<li><a href="https://www.npmjs.com/package/anywhere">anywhere</a> - 随时随地将你的当前目录变成一个静态文件服务器的根目录</li>
<li><a href="https://www.npmjs.com/package/supervisor">supervisor</a> - 监控 Node 代码，自动重启。 A supervisor program for running nodejs programs</li>
<li><a href="https://github.com/remy/nodemon">nodemon</a> - 监控 Node 代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.</li>
<li><a href="https://www.npmjs.com/package/pm2">pm2</a> - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 <a href="https://www.npmjs.com/package/forever">Forever</a> 的进阶库，想了解的可以看这篇文章<a href="http://se77en.cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/">《拥抱PM2》</a></li>
<li><a href="https://www.npmjs.com/package/async">async</a> - 一个流程控制工具包，提供直接而强大的异步功能</li>
<li><a href="https://www.npmjs.com/package/lodash">lodash</a> - JS 工具库 <code>Underscore.js</code>的一个 fork 发展而来</li>
<li><a href="https://github.com/socketio/socket.io">socket.io</a> - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用</li>
<li><a href="https://github.com/Automattic/mongoose">Mongoose</a> - 让 NodeJS 更容易操作 Mongodb 数据库；  附上一篇<a href="https://cnodejs.org/topic/504b4924e2b84515770103dd">Mongoose 学习参考文档</a></li>
<li><a href="http://npm.taobao.org/">CNPM</a> - 淘宝 NPM 镜像，提供了 NPM 同步的服务 当然可不仅仅这样，利用 CNPM 可以打造<strong>企业/个人</strong>私有的 NPM 服务 推荐篇搭建私有NPM的文章：<a href="http://blog.fens.me/nodejs-cnpm-npm/">《CNPM搭建私有的NPM服务》</a></li>
<li><a href="http://koajs.com/">koa</a> - 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套，强烈推崇 <a href="https://github.com/guo-yu/koa-guide">官方的文章教程</a></li>
<li><a href="https://github.com/shipitjs/shipit">Shipit</a> - 一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp，他们的核心都是任务系统。</li>
<li><a href="https://www.npmjs.com/package/node-inspector">node-inspector</a> - Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似</li>
<li><a href="https://www.npmjs.com/package/winston">winston</a> - Node 服务最流行的日志库之一</li>
<li><a href="https://www.npmjs.com/package/co">co</a> - 用 generator 写法让异步代码同步</li>
<li><a href="https://www.npmjs.com/package/thenify-all">thenify-all</a> - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object</li>
<li><a href="http://phantomjs.org/">PhantomJS</a> - 一般用来做抓取截图和无界面测试 也可以用来操作 DOM 和网络监测，很好玩的库 <a href="http://phantomjs.org/quick-start.html">Quick Start</a></li>
<li><a href="https://www.npmjs.com/package/ava">ava</a> - 偶是应TJ大神推荐而得之的 <code>ava</code> 未来的测试运行器</li>
<li><a href="https://github.com/mochajs/mocha">Mocha</a> - Node 里最常用的测试框架； 它支持多种 Node 的 Assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在 browser 上跑 JS 代码测试。</li>
<li><a href="https://www.npmjs.com/package/koa-validate">koa-validate</a> - <code>koa</code> 的校验库 可以非常方便的对 <code>queryString</code> 或 <code>postBody</code> 的信息进行验证</li>
<li><a href="https://www.npmjs.com/package/line-reader">line-reader</a> - 基于<code>steam</code>的按行读文件，偶处理日志时用哒 要不实现一个按行读文件，又得 <code>steam</code>、 又得 <code>chunk</code>，还是比较麻烦的</li>
<li><a href="https://www.npmjs.com/package/everyauth">everyauth</a>| |OAuth 的集成解决方案</li>
<li><a href="http://documentup.com/shelljs/shelljs">shelljs</a> - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单</li>
<li><a href="https://www.npmjs.com/package/hashids">hashids</a> - 看名称就懂，给 userid 加解密用的</li>
<li><a href="https://github.com/coopernurse/node-pool">node-pool</a> - 让 <code>Node</code> 有连接池的概念</li>
<li><a href="https://www.npmjs.com/package/colors">colors</a> - 花俏的小工具 让打印<code>console.log</code>时有更好的展示样式</li>
<li><a href="https://www.npmjs.com/package/n">n</a> - 控制Node的版本，想升级一行代码搞定</li>
</ul>
<blockquote>
<p><code>supervisor</code> 和 <code>nodemon</code> 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备</p>
<p>以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)</p>
</blockquote>
<h3 id="node_project">Node Project</h3>

<p>  <em>暂无</em></p>
<h2 id="read">精选阅读</h2>

<h3 id="fedev">前端技术</h3>

<ul>
<li><a href="http://www.imooc.com/learn/590">2015D2前端论坛</a> - Node方向非常值得看，有干货，相信东哥推荐哈</li>
<li><a href="http://zhibimo.com/read/Ashu/front-end-style-guide/index.html">前端开发规范手册</a> -  此手册主要实现的目标：代码一致性和最佳实践</li>
<li><a href="https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md">《babel-handbook》</a> - 可以用新的规范(如 <code>ES6</code>)写代码，经过 <code>babel</code> 编译后生成没有兼容问题的代码</li>
<li><a href="http://es6.ruanyifeng.com/">ECMAScript 6入门</a> - 阮一峰大神所著，一本开源的JS教程 全面介绍 ECMAScript 6新引入的语法特性</li>
<li><a href="http://wiki.jikexueyuan.com/project/react-native/">ReactNative 中文版</a> - 翻译自官方的中文文档</li>
<li><a href="https://fakefish.github.io/react-webpack-cookbook/index.html">ReactWebpackCookBook</a> |  |此书会引导读者是进入<code>React</code>和<code>Webpack</code>的世界。 俩都是非常前沿的技术，同时使用会更有趣。</li>
<li><a href="https://github.com/ele828/react-native-guide">ReactNative 学习指南</a> - 新玩意层出不穷... 对于能持续学习的童鞋，这是个美好的时代</li>
<li><a href="http://www.css88.com/doc/codeguide/">HTML/CSS 编码规范</a> - 编写灵活、稳定、高质量的<code>HTML</code>和<code>CSS</code>代码的规范</li>
<li><a href="http://gold.xitu.io/entry/56c29abfa34131005b8cb1f3">移动前端入门</a> - 入门价值高，移动方向常见问题的较好总结</li>
<li><a href="https://github.com/nimojs/gulp-book">GulpBook</a> - Gulp 是基于 Node 实现 Web 前端自动化开发的工具</li>
</ul>
<h3 id="node_read">Node 学习资料</h3>

<ul>
<li><a href="https://github.com/youyudehexie/node123">Node.js 中文资料导航</a> - Node 的中文资料导航，<code>start1300+</code></li>
<li><a href="http://blog.fens.me/series-nodejs/">从零开始 NodeJS 系列文章</a> - 基本上每一篇都看过，强烈推荐</li>
<li><a href="http://nqdeng.github.io/7-days-nodejs/">Node.js 包教不包会</a> - 值得阅读，看完绝不用买书鸟</li>
<li><a href="https://github.com/alsotang/node-lessons">七天学会 NodeJS</a> - 劳资还没看，不过看目录还不错:)</li>
<li><a href="https://github.com/dead-horse/node-style-guide">Style Guide</a> - 这是一份关于如何写出一致且美观的 <code>Node</code> 代码的风格指南</li>
<li><a href="http://book.apebook.org/minghe/koa-action/index.html">koa实战</a> - “<a href="https://github.com/minghe">明河</a>出品”这四字已经说明一切。PS：正在连载中</li>
<li><a href="https://github.com/jabez128/stream-handbook">stream-handbook</a> - 如果学习 NodeJS，那么流一定是需要掌握的概念</li>
</ul>
<h3 id="interview">前端面试</h3>

<ul>
<li><a href="http://dongfei.baijia.baidu.com/article/52449">在 LinkedIn 做面试官的故事</a> - 非面试题，介绍 LinkedIn 的面试过程 文章有很多中肯的建议和想法，推荐阅读</li>
<li><a href="http://www.w3cplus.com/css/write-to-front-end-developer-interview.html">大漠：写给前端面试者</a> - 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受...</li>
<li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese">前端面试题</a> - Git 上非常火的前端面试题，<code>start17k+</code></li>
<li><a href="https://github.com/paddingme/Front-end-Web-Development-Interview-Question">前端面经</a> - 主要内容是些前端面试笔试题和面试套路，值得阅读</li>
</ul>
<h3 id="otherdev">其他技术</h3>

<ul>
<li><a href="https://github.com/StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB%20%E6%9E%81%E7%AE%80%E5%AE%9E%E8%B7%B5%E5%85%A5%E9%97%A8.md">MongoDB 极简实践入门</a> - 入门推荐的套路，非常浅显易懂</li>
<li><a href="https://github.com/macdao/ocds-guide-to-setting-up-mac">Mac 设置指南</a> - Mac 使用必看 尤其适合 偏执狂/强迫症 患者:)</li>
<li><a href="https://github.com/xirong/my-markdown">Markdown 资料</a> - 简单看些语法入门，快速用起来</li>
</ul>
<h2 id="tools">工具/软件</h2>

<h3 id="web">Web</h3>

<ul>
<li><a href="http://caniuse.com/">CanIuse</a> - <strong>前端必备</strong>；查看浏览器对各种新特性的兼容情况</li>
<li><a href="http://overapi.com/">overapi</a> - 最全的开发人员在线速查手册</li>
<li><a href="http://naotu.baidu.com">百度脑图</a> - 非常方便的思维导图工具</li>
<li><a href="https://www.processon.com/">ProcessOn</a> - 和百度脑图的功能类似，脑图工具。</li>
<li><a href="http://vimawesome.com/">VimAwesome</a> - Vim 插件集合，<strong>Vim 党必备</strong></li>
<li><a href="https://tower.im">Tower</a> - 小而美的多人协同工具。 不光只有 Web 版，还有 iPhone、iPad、Android、微信版。</li>
<li><a href="https://slides.com/">Slides</a> - 一个所见即所得的 WebPPT 编辑器，非常推荐</li>
<li><a href="http://www.faviconer.co/">faviconer.co</a> - 一个所见即所得的icon生成器，很好用</li>
<li><a href="http://smallpdf.com/cn">smallpdf</a> - 提供各种格式和 PDF 互相转换</li>
<li><a href="https://www.zybuluo.com/mdeditor">Cmd Markdown</a> - 好用的 Web 版 Markdown 编辑器</li>
<li><a href="https://stackedit.io/editor">StackEdit</a> - 又是一款 Web 版 Markdown 编辑器</li>
<li><a href="https://modao.cc/">墨刀</a> - 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。</li>
<li><a href="http://www.htm2pdf.co.uk">htm2pdf</a>| |HTML to PDF</li>
<li><a href="https://speakerdeck.com/p/featured">Speaker Deck</a> - 在线的演讲稿展示平台</li>
<li><a href="http://runjs.cn/">RunJS</a> - 在线编辑、展示、分享、交流你的 <code>JavaScript</code> 代码</li>
<li><a href="https://bootswatch.com/">Bootswatch</a> - <code>Bootstrap</code> 的免费模板</li>
<li><a href="https://github.com/almasaeed2010/AdminLTE/">AdminLTE</a> -  又是一个 <code>Bootstrap</code> 的免费管理后台</li>
</ul>
<h3 id="app">APP</h3>

<blockquote>
<p>以下列表中的 APP 都是不区分系统平台的</p>
</blockquote>
<ul>
<li><a href="https://www.yinxiang.com/">印象笔记</a> - 免费账号完全够用，跨平台跨终端的记录软件</li>
<li><a href="http://www.365rili.com/">365日历</a> - 首先肯定比系统自带的日历强大，要不推荐个蛋蛋 俺一般用来搞目标管理，比如学习计划和工作计划 生活中会订阅演唱会、电影首映的信息</li>
<li><a href="http://www.duokan.com/">多看阅读</a> - kindle 确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽</li>
<li><a href="https://itunes.apple.com/cn/app/surge-web-developer-tool-proxy/id1040100637?mt=8&amp;v0=WWW-GCCN-ITSTOP100-PAIDAPPS&amp;l=&amp;ign-mpt=uo%3D4">Surge</a> - 非免费 牛逼的网络开发与调试工具，前端必备</li>
<li><a href="https://github.com/coderyi/Monkey">Monkey</a> - Monkey 是 iPhone 上一个 GitHub 第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名</li>
</ul>
<h3 id="mac">Mac</h3>

<blockquote>
<p>对于美好事务的追求无论何时都不算晚，前年公司给配了台 Mac 用做测试开发机，于是开始在 Mac 下办公。 <strong>Windows？</strong> 回不去鸟...</p>
</blockquote>
<ul>
<li><a href="http://brew.sh/">Homebrew</a> - 没它程序猿没法好好干活... <code>Homebrew</code>使<code>OS X</code>更完美。 使用<code>gem</code>来安装<code>gems</code>、用<code>brew</code>来搞定那些依赖包</li>
<li><a href="http://www.iterm2.com/">iTerm2</a> - Mac 终端功能少又不好看，iTerm2 可以解救你~  推荐篇文章：<a href="http://swiftcafe.io/2015/07/25/iterm/?hmsr=toutiao.io&amp;utm_medium=toutiao.io&amp;utm_source=toutiao.io">《让你的命令行丰富多彩》</a></li>
<li><a href="https://itunes.apple.com/cn/app/browseshot/id615916400">BrowseShot</a> - 偶正在使用的网页截图工具，强烈推荐</li>
<li><a href="http://www.scootersoftware.com">BeyondCompare</a> - 在Windows下就开始用了 比对文件和文件夹杠杠好使，Merge必备工具</li>
<li><a href="https://www.mediaatelier.com/CheatSheet/">CheatSheet</a> - 能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘</li>
<li><a href="http://www.sequelpro.com">Sequel Pro</a> - 免费好用的Mysql工具</li>
<li><a href="http://www.cockos.com/licecap/">LICEcap</a> - 屏幕录制工具，支持导出 GIF 动画图片格式 轻量级、使用简单，录制过程中可以改变录屏范围</li>
<li><a href="http://manico.im/">Manico</a> - 快捷启动和切换 APP 的工具，高效的第一步 AppStore 上收费，不过可以免费试用</li>
<li><a href="http://www.jetbrains.com/webstorm/">WebStorm</a> - 功能超强的前端 IDE，不多介绍，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转...</li>
<li><a href="https://atom.io">Atom</a> - 2015 年 7 月之前，在桌面环境下我最喜欢的编辑器是 Sublime。 但之后就是 Atom，俺也专门为它写了篇<strong><em><a href="https://github.com/nieweidong/learn-atom">使用纪要</a></em></strong></li>
<li><a href="http://www.getmarkman.com/">马克鳗</a> - MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，<strong>强烈推荐</strong></li>
<li><a href="https://www.wireshark.org/">Wireshark</a> - 说实话，Mac 下木有 Fiddler 挺不习惯，不过在有更强大的替代品</li>
<li><a href="https://www.sourcetreeapp.com/">SourceTree</a> - 一款好用的的 Git 客户端工具，重点是支持中文:)</li>
<li><a href="https://www.focusboosterapp.com/">focus booster</a> - 因为比较在意时间管理，所以这软件是俺工作时间的必备之物</li>
<li><a href="http://25.io/mou/">Mou</a> - 我曾使用过的 mk 编辑器。原本准备去掉这个推荐，但是我想让大家了解下这个有意思的事情：<a href="http://matrix.sspai.com/p/c7a3c9c0">《一年了，那个闻名遐迩的 Mou 你还记得吗？》</a></li>
</ul>
<h3 id="linux">Linux</h3>

<ul>
<li><a href="http://ohmyz.sh/">oh-my-zsh</a> - <strong><em>终端党</em></strong> 必用的好工具，强烈推荐</li>
<li><a href="http://www.cnblogs.com/iadanac/p/3859481.html">tree</a> - linux 以树状图逐级列出目录的内容</li>
<li><a href="http://www.oneapm.com/">oneapm</a> - 强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)</li>
<li><a href="https://github.com/jkbrzt/httpie">httpie</a> - 一个 CLI 中的 HTTP 客户端 用法简单、易读</li>
</ul>
<h3 id="BrowserPlugins">Chrome 浏览器插件</h3>

<blockquote>
<p><code>Chrome</code> 应用商店必定是需要翻墙的哈。</p>
</blockquote>
<p>以下插件都是俺多年积累淘出来的，数量不多，所以就不区分 <code>Github</code> 插件和非 <code>Github</code> 插件了。按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用。后续如有新发现好插件，偶也会及时更新哒。</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop">Postman</a> - <code>POST</code> 接口调试终结者，异常强大的接口调试工具。稍稍有一点学习成本，推荐之</li>
<li><a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc">JSONView</a> - 就是个 <code>JSON</code> 格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS：同类插件有不少，所以用的开心就行</li>
<li><a href="https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/pflgjjogbmmcmfhfcnlohagkablhbpmg">二维码生成器</a> - RT。PS：这FF早已经自带生成二维码工具了，<code>Chrome</code> 还得装插件才行，任性...</li>
<li><a href="https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka">Eye Dropper</a> 前端必备的颜色提取神器，操作简单容易上手</li>
<li><a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn">Page Ruler</a> 前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有</li>
<li><a href="https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg">FireShot</a> 可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的</li>
<li><a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg">Infinity</a> - 好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的 <strong>新标签页</strong> 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、<code>Gmail</code>、<code>Chrome</code>商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等</li>
<li><a href="https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca">Momentum</a> 同样也是 <strong>新标签页</strong> 的插件，但是不管是视觉上(高清大图)还是功能上，都比 <a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg">Infinity</a> 高大上不少，<code>Setting</code> 里面有不少设置和快捷键，都很好上手的。<a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg">Infinity</a>胜在中文和直观，<a href="https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca">Momentum</a>胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢:)</li>
<li><a href="https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc">Octotree</a> - 在浏览器左侧展示 <code>Github</code> 项目的文件导航，使目录结构一目了然，而且我们国内 <code>Github</code> 的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 <code>Github</code> 的同学强烈推荐</li>
<li><a href="https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn">BuiltWith</a> / <a href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg">wappalyzer</a> / <a href="https://chrome.google.com/webstore/detail/chrome-sniffer-plus/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh">Chrome Sniffer Plus</a> - 几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 <code>Web Servers</code>、服务端的 <code>Frameworks</code> 或 <code>JS</code> 框架，小到 <code>meta</code>、编码格式甚至 <code>Analytics</code>，非常推荐</li>
<li><a href="https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb/related">Adblock Plus</a> 非常非常有名的免费的过滤广告的插件。PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告</li>
<li><a href="https://chrome.google.com/webstore/detail/wide-github/kaalofacklcidaampbokdplbklpeldpj/related">Wide Github</a> 无聊又实用的 <code>Github</code> 插件。无聊是因为这个插件就特么一个功能，<strong>加宽</strong>，能让 <code>Github</code> 页面变宽，每行展示更多的内容，尤其配合着<a href="https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc">Octotree</a>，展示效果极佳。非常推荐 <code>Mac</code> 用户实用，因为屏幕比较不大，变宽后阅读感觉更好</li>
<li><a href="https://chrome.google.com/webstore/detail/porter-plug/lngoojfoglemfpbeiomhgheccpdheilp">GitPlug</a> - 在 <code>Github</code> 项目页中嵌入有关的图表信息，直观的展示当前项目的 <code>Star Trend</code>，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 <code>News</code> 展示</li>
<li><a href="https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp">OctoLinker</a> - 在 <code>package.json</code> 或任意 <code>.js</code> 文件中，可以方便的对 <code>require()</code> 的 <code>package</code> 进去点击，跳转去对应的 <code>Github</code> 页面。PS：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟</li>
</ul>
<p>补充：</p>
<ol>
<li>翻墙代理的插件偶没使用，偶手机和电脑的翻墙都是配的 <code>Surge</code> 无脑搞定，不过翻墙代理插件推荐<a href="https://chrome.google.com/webstore/detail/proxy-switchysharp/dpplabbmogkhghncfbfdeeokoefdjegm">Proxy SwitchySharp</a>，熊掌公司里大多用的都是它</li>
<li>日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈</li>
</ol>
<h3 id="git">Git</h3>

<ul>
<li><a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git 教程-廖雪峰</a> - 俺有看过不少 Git 的文章，确实这个系列是最通俗易懂的</li>
<li><a href="http://github-awards.com/">GitAwards</a> - Git 工具，可以查看 Git 排名</li>
<li><a href="https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md">Git 速查</a> - 分类清晰的速查表</li>
<li><a href="http://rogerdudler.github.io/git-guide/index.zh.html">Git 简明指南</a> - 入门<code>Github</code>的简明指南，木有高深内容:)</li>
<li><a href="https://github.com/xirong/my-git">Git 学习资料整理</a>| |内容包括很多 Git 的相关资料，<code>star 1200+</code></li>
<li><a href="https://github.com/phodal/github-roam">GitHub 漫游指南</a> - 一篇还算不错的 Git 学习总结，就是乱了点... 我理解作者<strong><em>漫游</em></strong>的意思是漫无目的想到哪写到哪~ 看到作者为鸟达成 Git 连击的成就，也是蛮拼的:)</li>
</ul>
<h3 id="mongodb">数据端</h3>

<ul>
<li><a href="https://github.com/Automattic/mongoose">Mongoose</a> - 让 NodeJS 更容易操作 Mongodb 数据库。  附上一篇<a href="https://cnodejs.org/topic/504b4924e2b84515770103dd">Mongoose 学习参考文档</a></li>
</ul>
<h3 id="ux">设计/交互</h3>

<blockquote>
<p>作为负责最终效果呈现的前端工程师，多少得了解些 <strong>设计和交互</strong> 的，这也是为什么 fetool 会单独的存在这一章...当然话又说回来了，偶毕业的第一份工作是设计:)</p>
</blockquote>
<ul>
<li><a href="http://www.zcool.com.cn/works/">站酷</a> - 里面好东西太多，俺当年真没少再上面淘素材</li>
<li><a href="http://www.ui.cn/list.html">UI中国</a> - 光听名字就知道有多高大上鸟:)</li>
</ul>
<h3 id="handbook">速查手册</h3>

<blockquote>
<p>RT，这篇都是些文档或者API，一般这类东西都在大家浏览器的书签内，偶这也列一下大前端常用的手册地址</p>
</blockquote>
<ul>
<li><a href="https://github.com/joshbuchea/HEAD">HEAD</a> - 最全的 <code>&lt;head&gt;</code> 列表，真心佩服这种偏执的整理能力</li>
<li><a href="http://cdn.code.baidu.com/">百度CDN公共库</a> - 基本常见的库都收录拉，搞 demo 的时候特方便</li>
<li><a href="http://codeguide.bootcss.com/">HTML 和 CSS 代码规范</a> - 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范</li>
<li><a href="http://linux.51yip.com">Linux命令中文手册</a> - 木有系统的好好学习 Linux，所以命令更不熟悉 真羡慕那些CLI玩的飞起的:)</li>
<li><a href="https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md">Git 速查</a> - 分类清晰的速查表</li>
<li><a href="http://jquery.cuishifeng.cn/">jQueryAPI 1.11.3</a> - ZeptoAPI 基本和 jQuery 一样，所以看一份就好</li>
<li><a href="http://www.php100.com/manual/css3_0/index.html">CSS3</a> - CSS3 的在线手册</li>
<li><a href="http://www.expressjs.com.cn/4x/api.html">Express API</a> - 中文手册:) 4.x和3.x都有</li>
<li><a href="http://codeigniter.org.cn/user_guide/index.html">CI用户指南</a> - 一个轻量级的 PHP 框架用户指南 推荐指数低的原因是劳资PHP比较弱，囧</li>
<li><a href="http://www.laruence.com/manual/">Yaf</a> - 鸟哥(惠新宸)所写的 PHP 框架 推荐指数低的原因同上...</li>
</ul>
<h3 id="other">杂七杂八</h3>

<blockquote>
<p>放些开发中较有用的杂物在这儿</p>
</blockquote>
<ul>
<li><a href="https://github.com/soulteary/tenant-point">租房要点</a> - 适用于北上广深杭，大城市打拼<strong>租房</strong>确实是硬伤</li>
<li><a href="https://github.com/jsfront/src/blob/master/qq.md">QQ 群规</a> - 突然某天，有个 QQ 群让我加群 原本我是拒绝的，但当我看完这篇 QQ 群规后... 劳资真的被感动到了，太牛逼、够专业！ 最后，我默默加群鸟:)</li>
<li><a href="https://github.com/github/gitignore">.gitignore 文件</a> - 介绍不同语言项目的 gitignore 模板</li>
<li><a href="https://github.com/easychen/howto-make-more-money">程序员如何优雅的挣零花钱？</a> - 中肯的文章，如果读完能有些许收获，那么恭喜你</li>
<li><a href="https://github.com/ben174/git-draw">git-draw</a> - 黑魔法，可以修改自己 Git 上的 Contributions</li>
<li><a href="https://www.gitbook.com">GitBook</a> - 写记录的好地方</li>
<li><a href="https://codebabes.com/">Codebabes</a> - 学编程的网站。 重点是每通过一个测试，尼玛对应的妞会脱一件衣服... PS：要翻墙哦~</li>
<li><a href="http://emailframe.work/">emailframe</a> - 邮件展示确实比较坑，建议有需要的收藏</li>
<li><a href="https://github.com/nieweidong/ReadmeSample">ReadmeSample</a>| |项目高大上的第一步就是<strong>包装</strong>，所以来看看 <code>README</code> 的书写套路吧 PS：劳资怎么这么无聊...</li>
</ul>
<h3 id="cool">前端炫技-<em>炫酷狂拽叼炸天站点</em></h3>

<ul>
<li><a href="http://www.windows93.net/">windows93</a> - 模拟 Win93 桌面，思路、体验和整体效果比较有意思</li>
<li><a href="http://geektyper.com/">GeekTyper</a> - 好玩又具有 Geek 精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙</li>
<li><a href="http://2016.makemepulse.com/">2016.makemepulse.com</a> - 帅哭了。请使用现代浏览器打开</li>
<li><a href="http://skill.phodal.com/">前端技能栈</a> - 好玩的前端技能栈展示</li>
<li><a href="https://www.mapbox.com/">Mapbox</a> - 非常叼的开源项目，有方便的 JSAPI(还有 SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要翻墙</li>
<li><a href="http://www.clarkduvall.com/">Clark Duvall</a> - 一枚歪果仁的个人 blog，范儿叼叼的</li>
<li><a href="http://johnpolacek.github.io/superscrollorama/">SuperScrollorama</a> - 好玩好看的动画库，链接是 SuperScrollorama 的展示页</li>
<li><a href="http://matthew.wagerfield.com/parallax/">parallax.js</a> - 一个视差引擎的官网，在电脑和手机上都有很好的体验</li>
<li><a href="http://yusugomori.com/projects/css-sans/fonts">CSS字母</a> - 用 CSS 实现英文字母，叼叼的</li>
<li><a href="https://modao.cc/">墨刀</a> - 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。</li>
</ul>
<h3 id="summary">小结</h3>

<h5 id="-">背景</h5>
<p>  俺算个比较能自我总结的码农，所以偶尔喜欢写点东西做些记录或者自我熏陶陶醉一下。
  可写着写着发现<code>Evernote</code>里面的东西太尼玛多(乱)了，于是想着把一些技术相关的资料都整理整理，都丢到<code>Github</code>上沉淀下来。 这样Evernote就可以只需要记录些偏生活方便的，看着清爽一些...</p>
<p>  所以，这篇记录其实只是为偶自己而写，确信以后也一直会这样~~~</p>
<h5 id="-">说说目标</h5>
<p>  其实与这篇记录类似的文章太多鸟，俺也不愿意成为一个单纯的收集资料，分享资料的这么个东西。
  我希望 fetool 能更生动、更个性，最好能更另类点，对于每样工具的思考和解析更多点，吐槽也必须有理有据，然后再配上劳资收集的 low 图，完美！
  <strong>希望通过不停的完善这篇记录，能Push劳资多了解业内的新玩具和新创意，然后围绕这些新东西，客观的再写点好东西，比如文章、资料、开源项目这些，让其他伙伴们少走弯路或学的更顺畅点儿</strong></p>
<blockquote>
<p>所以劳资对自己的要求是：这篇记录里列出的每样东西，自己都得的去了解、去尝试，然后再列出来。 能举一反三最好，如果达不到至少也能清楚的认识：列出来的这玩意对程序员有没有卵用，解决了啥痛点。</p>
</blockquote>
<h3 id="todo">TODO</h3>

<ol>
<li><p>继续完善和扩充内容</p>
</li>
<li><p>“备注/说明”这一栏不够犀利，希望再多加入自己的理解、点评、吐槽，让这篇记录更犀利和生动</p>
</li>
<li><p>支持导出多种格式，如<code>.pdf</code>、<code>.epub</code>、<code>.mobi</code>等</p>
</li>
<li><p>后续看看如果有必要，可以单独搞个页面，优化下阅读和展示效果</p>
</li>
</ol>
<hr>
<p>以下是 <a href="http://weibo.com/jayli">@拔赤</a> 总结的前端技能图：
<img src="img/fe.jpg" alt="拔赤总结的前端技能图"></p>
<hr>
<p>完善 ing，慢慢把 <strong>Evernote</strong> 和 <strong>浏览器书签</strong> 里面的好东西慢慢捣腾到这儿，更欢迎 PR，谢谢。</p>

			</article>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>
<script type="text/javascript" src="toc/js/prettify.js"></script>

<SCRIPT type="text/javascript">
	$(function() {
		var css_conf = eval(markdown_panel_style);
		$('#readme').css(css_conf)

		var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
		$('pre').addClass('prettyprint linenums');
		$('td pre').removeClass('prettyprint');
		prettyPrint();

	});
</SCRIPT>